<html>
<head>
    <style>
        /* 定义棋盘的样式 */
        .board {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border: 5px solid black;
        }

        /* 定义每个格子的样式 */
        .cell {
            border: 1px solid black;
            font-size: 100px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="board">
        <!-- 创建九个格子，每个格子有一个 id 和一个 onclick 事件 -->
        <div class="cell" id="cell_0" onclick="clickCell(0)"></div>
        <div class="cell" id="cell_1" onclick="clickCell(1)"></div>
        <div class="cell" id="cell_2" onclick="clickCell(2)"></div>
        <div class="cell" id="cell_3" onclick="clickCell(3)"></div>
        <div class="cell" id="cell_4" onclick="clickCell(4)"></div>
        <div class="cell" id="cell_5" onclick="clickCell(5)"></div>
        <div class="cell" id="cell_6" onclick="clickCell(6)"></div>
        <div class="cell" id="cell_7" onclick="clickCell(7)"></div>
        <div class="cell" id="cell_8" onclick="clickCell(8)"></div>
    </div>

    <script>
        // 定义一个数组，用来存储每个格子的状态，初始为空
        var board = ["", "", "", "", "", "", "", "", ""];

        // 定义一个变量，用来表示当前轮到哪个玩家，初始为 x
        var turn = "x";

        // 定义一个函数，用来处理点击格子的事件
        function clickCell(index) {
            // 获取被点击的格子的元素
            var cell = document.getElementById("cell_" + index);

            // 判断格子是否为空，如果为空，才可以落子
            if (board[index] == "") {
                // 把当前玩家的符号显示在格子上
                cell.innerHTML = turn;

                // 把当前玩家的符号存储在数组中
                board[index] = turn;

                // 判断当前玩家是否赢了
                if (checkWin(turn)) {
                    // 如果赢了，弹出提示框，并结束游戏
                    alert(turn + " 赢了！");
                    return;
                }

                // 判断是否平局
                if (checkDraw()) {
                    // 如果平局，弹出提示框，并结束游戏
                    alert("平局！");
                    return;
                }

                // 切换玩家
                switchTurn();
            }
        }

        // 定义一个函数，用来判断某个玩家是否赢了
        function checkWin(player) {
            // 定义一个二维数组，用来表示所有可能的赢法
            var winPatterns = [
                [0, 1, 2], // 横一行
                [3, 4, 5], // 横二行
                [6, 7, 8], // 横三行
                [0, 3, 6], // 竖一列
                [1, 4, 7], // 竖二列
                [2, 5, 8], // 竖三列
                [0, 4, 8], // 斜一线
                [2, 4, 6]  // 斜二线
            ];

            // 遍历所有的赢法
            for (var i = 0; i < winPatterns.length; i++) {
                // 获取当前的赢法
                var pattern = winPatterns[i];

                // 判断当前玩家是否在这个赢法上占据了三个格子
                if (board[pattern[0]] == player && board[pattern[1]] == player && board[pattern[2]] == player) {
                    // 如果是，返回 true，表示赢了
                    return true;
                }
            }

            // 如果没有任何一个赢法满足，返回 false，表示没有赢
            return false;
        }

        // 定义一个函数，用来判断是否平局
        function checkDraw() {
            // 遍历所有的格子
            for (var i = 0; i < board.length; i++) {
                // 判断是否有空格子
                if (board[i] == "") {
                    // 如果有，返回 false，表示没有平局
                    return false;
                }
            }

            // 如果没有任何一个空格子，返回 true，表示平局
            return true;
        }

        // 定义一个函数，用来切换玩家
        function switchTurn() {
            // 如果当前是 x，切换为 o
            if (turn == "x") {
                turn = "o";
            } else {
                // 如果当前是 o，切换为 x
                turn = "x";
            }
        }
    </script>
</body>
</html>
